<% present @user do |user_presenter| %>
    <div class="format-palette hide" data-behavior="menu_content">
        <%= form_with(model: user_presenter, url: format_user_path(current_user), data: {remote: true}) do |f| %>
            <%= f.hidden_field :font_size, data: {behavior: "font_size"} %>
            <%= f.hidden_field :view_mode, data: {behavior: "view_mode"} %>
            <%= f.hidden_field :feeds_width, data: {behavior: "feeds_width"} %>
            <%= f.hidden_field :entries_width, data: {behavior: "entries_width"} %>

            <div class="leading-[17px] my-4 mx-[16px] text-700">Theme</div>

            <div class="theme-options">
                <%= f.collection_radio_buttons(:theme, Feedbin::Application.config.themes, :slug, :name) do |b| %>
                    <div class="option">
                        <%= b.radio_button data: {behavior: "auto_submit switch_theme"} %>
                        <%= b.label class: "swatch-wrap" do %>
                            <span class="swatch"></span>
                        <% end %>
                    </div>
                <% end %>
            </div>

            <div class="leading-[17px] mt-8 mb-2 mx-[16px] text-700">Typeface</div>

            <div class="control" style="margin-bottom: 16px;">
                <div class="font-options">
                    <%= f.collection_radio_buttons(:font, Feedbin::Application.config.fonts, :slug, :name) do |b| %>
                        <div class="option">
                            <%= b.radio_button class: "peer", data: {behavior: "auto_submit change_font"} %>
                            <%= b.label class: "group flex !flex-row gap-2 items-center leading-[40px]" do %>
                                <%= render Form::RadioComponent.new %>
                                <%= b.text %>
                            <% end %>
                        </div>
                    <% end %>
                </div>
            </div>

            <div class="control">
                <span class="font-size text-sm">
                    <button class="reset" data-behavior="decrease_font">Smaller</button>
                    <button class="reset" data-behavior="increase_font">Larger</button>
                </span>
            </div>

            <div class="mobile-hide">
              <div class="leading-[17px] mt-8 mb-4 mx-[16px] text-700">Display</div>
              <div class="control">
                <%= render Settings::ControlGroupComponent.new class: "mb-4" do |group| %>
                  <% group.item do %>
                    <input type="checkbox" id="toggle_full_screen" data-behavior="toggle_full_screen" class="peer">
                    <label for="toggle_full_screen" class="group">
                      <%= render Settings::ControlRowComponent.new do |row| %>
                        <% row.title do %>
                          <span class="flex items-center text-sm">
                            Full Screen <span class="ml-auto text-500 text-sm">⇧&nbsp;&nbsp;F</span>
                          </span>
                        <% end %>
                        <% row.control { render Form::SwitchComponent.new } %>
                      <% end %>
                    </label>
                  <% end %>

                  <% group.item do %>
                    <%= f.check_box :entry_width, data: {behavior: "auto_submit entry_width"}, class: "peer" %>
                    <%= f.label :entry_width, class: "group" do %>
                      <%= render Settings::ControlRowComponent.new do |row| %>
                        <% row.title do %>
                          <span class="text-sm">Fluid Width</span>
                        <% end %>
                        <% row.control { render Form::SwitchComponent.new } %>
                      <% end %>
                    <% end %>
                  <% end %>
                <% end %>
              </div>
            </div>

            <div style="text-align: center; margin-top: 8px; font-size: 13px;">
              <%= link_to "Advanced", settings_appearance_path, remote: true, data: {open_dialog: Dialog::EditAppearance.dom_id} %>
            </div>

        <% end %>
    </div>

    <div class="source-menu-container dropdown-content hide">
    </div>
<% end %>